/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<!-- 选择地址弹框  -->
		    <view v-show="hide">
		        <view class="cover-layer" @tap="closeCategoryModal"></view>
		        <view class="categories">
		            <block v-if="currentArea<2">
		                <view class="category" @tap="openCategoryModal" v-for="(item,index) in category" :data-idx="index">
							{{item.mobile_name}}
						</view>
		            </block>
		            <block v-if="currentArea==2">
		                <button class="confirm-btn" @tap="openCategoryModal" data-type="confirm">确定</button>
		                <checkbox-group @change="categoryCheckboxChange">
		                    <view class="category"  v-for="(item,index) in category">
		                        <checkbox color="#ff3b3b" :value="item.id+','+item.mobile_name" />{{item.mobile_name}}
		                    </view>
		                </checkbox-group>
		            </block>
		        </view>
		    </view>
	</view>
</template>

<script>
	import {getGoodsCategoryList,getGoodsCategoryProgeny} from "@/api/api.js";
	export default {
		props:{
			hide:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				is_level1:"1",//默认传是第一级
				checkList:"",//多选数据
				category:"",
				currentArea:0,
			};
		},
		created(){
			this.getGoodsCategoryList(this.is_level1)
		},
		methods:{
			/*经营类目列表*/ 
			getGoodsCategoryList(params){
				getGoodsCategoryList(params).then(res=>{
					console.log(res)
					this.category=res;
					
				})
			},
			/*类目下面的分类*/ 
			getGoodsCategoryProgeny(id){
				getGoodsCategoryProgeny(id).then(res=>{
					console.log(res)
					console.log(this.currentArea)
					this.category=res;
					
					
				})
			},
			openCategoryModal(e){
				var type=e.currentTarget.dataset.type;
				if(type=="confirm"){
					let obj={
						 ishide:false,
						 checkList:this.checkList
					}
					this.$emit("closeRegionsModal",obj)
					this.$emit("closeRegionsModal",obj)
				}else{
					this.currentArea=++this.currentArea;
					let idx=e.currentTarget.dataset.idx;
					var id=this.category[idx].id;
					
					
					if(this.currentArea==1){
						
						
						this.getGoodsCategoryProgeny(id);
						
					}
					if(this.currentArea==2){
						this.category=this.category[idx].children;
						console.log(this.category);
						this.currentArea=2
					}
				}
				
			},
			categoryCheckboxChange(e){
				console.log(e)
				this.checkList=e.detail.value
			},
			/*关闭弹窗*/
			 closeCategoryModal(){
				
				 let obj={
					 ishide:false,
					 checkList:this.checkList
				 }
				 this.$emit("closeRegionsModal",obj)
			 }
		}
	}
</script>

<style lang="scss">
.categories{
    z-index: 20;
    position: fixed;
    top: 0;
	//#ifdef H5
	top:88rpx;
	// #endif
	
	
	
	
	
	
    bottom: 0;
    right: 0;
    left: 100rpx;
    overflow-x: hidden;
    font-size: 28rpx;
    color: #afafaf;
    background-color: white;
    padding: 0 25rpx;
}
.category{
    line-height: 84rpx;
    border-bottom: 1rpx solid #f3f3f3;
}
.confirm-btn{
    width: 50%;
}
checkbox .wx-checkbox-input{
    border-radius: 50%;
    height: 38rpx;
    width: 38rpx;
}
</style>
